<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
    <script>
        // onload = function(){
        //     console.log("加载完成")
        //     var box = document.getElementById("box")
        //     console.log(box);
        // }
    </script>
</head>
<body>
    <div id="box"></div>
    <img src="./l0.jpg" id="img" alt="">
</body>
<script>

    // var img = document.getElementById("img")
    // console.log(img);

    // onload = function(){
    //     console.log(img.offsetWidth);
    //     console.log(img.offsetHeight);
    // }

    // ============


    onresize = function(){
        // 浏览器可视区域的尺寸
        console.log( document.documentElement.clientWidth );
        console.log( document.documentElement.clientHeight );
    }

    // ========

    onscroll = function(){
        // 滚走了的距离
        console.log( document.documentElement.scrollTop );
        console.log( document.documentElement.scrollLeft );
    }

    // ==========

    document.onclick = function(){
        document.documentElement.scrollTop = 66;
    }

    // 回到顶部：0
        // 不要使用锚点连接，会刷新当前页面，不能做动画



</script>
</html>